<template>
  <div class="userDeptTree">
    <div class="treeLeft">
      <div>
        <el-input
          placeholder="搜索成员或部门"
          prefix-icon="el-icon-search"
          v-model="searchInput">
        </el-input>
      </div>
      <el-tree 
        :props="defaultProps" 
        :load="loadNode"
        :default-expanded-keys="defaultExpandedKeys"
        :expand-on-click-node="false"
        lazy
        @node-click="handleNodeClick">
        <span slot-scope="{node,data}">
            <span :title="data.label" style="font-size:14px;">
              <i :class="data.isUser ? 'el-icon-user' : 'el-icon-wallet'"></i>
              {{data.label}}
            </span>
          </span>
        </el-tree>
    </div>
    <div class="treeRight">
      <div class="checkedTitle">已选择的部门或成员</div>
      <div class="checkedBox">
        <div class="user" v-for="item in checkedUserDeptList" :key="item.key">
          <div class="userName">
             <i :class="item.isUser ? 'el-icon-user' : 'el-icon-wallet'"></i>
            <span>{{item.label}}</span>
          </div>
          <i class="el-icon-close"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'',
  data () {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      },
      searchInput: "",
      defaultExpandedKeys: [],
      checkedUserDeptList: [],
    }
  },
  methods: {
    loadNode(node, resolve) {
      let that = this;
      if(node.level === 0){
        this.$api.getWechatOrganizations(this.$route.query.domainid,"",{
          onSucess: function(res) {
            let data = res.data;
            if(data.errcode == 0){
              let arr = [];
              let nodes = {
                key: data.data[0].id, 
                level: 0, 
                label: data.data[0].name, 
                children: data.data[0].children, 
                leaf: data.data[0].hasChild ? false : true,
                isUser: data.data[0].userid ? true : false
              }
              that.defaultExpandedKeys.push(data.data[0].id);
              that.$forceUpdate();
              console.log("that--->",that)
              arr.push(nodes);
              resolve(arr);
            }
          }
        })
      }else{
        this.$api.getWechatOrganizations(this.$route.query.domainid,node.data.key,{
          onSucess: function(res) {
            let data = res.data;
            if(data.errcode == 0){
              let nodes = [];
              data.data.forEach((item) => {
                nodes.push({
                  key: item.id || item.userid, 
                  level: item.level, 
                  label: item.name, 
                  children: item.children, 
                  leaf: item.hasChild ? false : true,
                  isUser: item.userid ? true : false
                })
              });
              resolve(nodes)
            }
          }
        })
      }
    },
    handleNodeClick(data) {
      let oldList = this.checkedUserDeptList;
      let newList = [];
      let isExit = false;
      if(oldList.length>0){
        for(let i=0;i<oldList.length;i++){
          if(oldList[i].key == data.key){
            isExit = true;
          }
          if(!isExit){
            newList.push(oldList[i])
          }
        }
      }
      if(!isExit){
        newList.push(data);
      }
      this.checkedUserDeptList = newList;
      this.$emit("checkedUserDeptList",this.checkedUserDeptList)
    }
  },
}
</script>

<style lang='scss' scoped>
</style>
